<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰</title>
    <style>
        .cc{
            width: 200px;
            height: 200px;
            border: 5px solid blanchedalmond;
            background-color: lightcyan;
        }
        .cc_div{
            width: 50px;
            height: 50px;
            border: 5px;
            background-color: brown;
            margin: 50px auto;
        }
        .ccColor{
            background-color: chartreuse;
        }
       .ccDivColor{
        background-color: blueviolet;
       }
    </style>
</head>
<body>
    <div id="app">
        {{msg}}
        <div class="cc" :class="{ccColor:ishowColor}" @click="changeColor">
            <!-- stop阻止事件冒泡 -->
            <div class="cc_div" :class="{ccDivColor:ishowSmallColor}" @click.stop="changeSmallColor"></div>
        </div>
        <!--prevent用来阻止标签的默认行为-->
        <a href="www.baidu.com" @click.prevent="aclick">点击</a>

        <!--只触发标签自身的事件-->
        <div class="cc" @click.self="divClick">
            <!--用来阻止事件冒泡-->
            <input type="button" value="按钮1" @click="btnClick1"/>
            <input type="button" value="按钮2" @click="btnClick2"/>
        </div>

         <!--prevent用来阻止标签的默认行为-->
         <a href="www.baidu.com" @click.prevent.once="aclick">点击</a>

    </div>
</body>
</html>
<script  src="./js/2.7.14_dist_vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"事件修饰",
            ishowColor:false,
            ishowSmallColor:false,
        },
        methods:{
            changeColor(){
                this.ishowColor = !this.ishowColor;
            },
            changeSmallColor(){
                this.ishowSmallColor = !this.ishowSmallColor;
            },
            aclcik(){
                alert("点击了A标签");
            },
            divClick(){
                alert("父类触发了事件");
            },
            btnClick1(){
                alert("按钮1");
            },
            btnClick2(){
                alert("按钮2");
            }
        },
        computed:{

        },
    })
</script>